<template>
  <view>
    <info padding-top="10" />
    <view class="content">
      <view class="function-title"> 常用功能 </view>
      <view class="item" @click="goToBindStudent">
        <image src="/static/images/setup-student.png" class="pre-logo" />
        <wd-text text="绑定学生" color="#333333" size="14px" />
      </view>
      <view class="item" @click="gotoFace">
        <image src="/static/images/setup-face.png" class="pre-logo" />
        <wd-text text="人脸认证" color="#333333" size="14px" />
      </view>
      <view class="item">
        <image src="/static/images/setup-report.png" class="pre-logo" />
        <wd-text text="体锻报告" color="#333333" size="14px" />
      </view>
      <view class="item">
        <image src="/static/images/setup-config.png" class="pre-logo" />
        <wd-text text="设置" color="#333333" size="14px" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import Info from "@/pages/index/components/info.vue";
import { useConfigStore } from "@/store/config";

function goToBindStudent() {
  uni.navigateTo({
    url: `/pages-sub/student/selectSchool?showBack=true`,
  });
}
function gotoFace() {
  uni.navigateTo({
    url: `/pages/me/face`,
  });
}

definePage({
  style: {
    navigationBarTitleText: "我的",
    navigationStyle: "custom",
  },
});
const configStore = useConfigStore();
const { systemBarHeight } = storeToRefs(configStore);
</script>

<style lang="scss" scoped>
.function-title {
  margin-top: 60px;
  font-size: 12px;
  color: #999999;
  margin-bottom: 20px;
}
.content {
  margin-left: 24px;
}
.pre-logo {
  width: 24px;
  height: 24px;
  margin-right: 20px;
}
.item {
  display: flex;
  align-items: center;
  height: 34px;
  margin-bottom: 11px;
}
</style>
